<template>
  <div style="margin: 20px">
    <div style="display: flex; justify-content: space-between; font-size: 16px; border-bottom: 1px solid #ccc; padding-bottom: 5px">
      <div>
        <span class="el-icon-tickets" style="margin-right: 15px"></span>
        <span>消息模板</span>
      </div>
      <div class="top-button">
        <el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
      </div>
    </div>

    <div style="margin-top: 5px">
      <el-form ref="gridHeadLayout" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.templateName"
            size="mini"
            placeholder="请输入模板名称">
          </el-input>
        </el-form-item>
        <el-form-item class="top-button">
          <el-button size="mini" @click="handleSearch" icon="el-icon-search"></el-button>
          <el-button size="mini" @click="handleEmpty" icon="el-icon-refresh-right"></el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div style="height: calc(100vh - 285px);">
        <el-row v-if="tableData.length" :gutter="10">
          <el-col :span="6" v-for="(item, index) in tableData" :key="index">
            <el-card shadow="hover" style="margin: 5px; padding-bottom: 10px;">
              <div style="position: relative; border-bottom: 1px solid #ccc; padding-bottom: 20px;height: 100px;">
              <span style="position:absolute; top: 10px">
                <!-- 根据 appType 的值显示不同的图片 -->
                <img style="height: 70px; width: 70px" :src="require(`@/assets/${item.pushWays.channelType}.png`)" alt="图片" />
                <!-- 添加更多条件根据需要显示不同的图片 -->
              </span>
                <span style="position: absolute; top: 0; left: 80px; margin-left: 10px">
                <strong style="font-size: 18px">{{ item.templateName.length > 10 ? item.templateName.substring(0, 10) + '...' : item.templateName }}</strong>
                <span
                  :style="{
                             display: 'inline-block',
                             height: '8px',
                             width: '8px',
                             background: item.templateStatus === 1 ? 'rgb(10, 191, 91)' : 'rgb(229, 69, 69)',
                             borderRadius: '7px',
                             verticalAlign: 'middle',
                             marginLeft: '10px',
                             marginBottom: '5px'}">
                </span>
              </span>
                <el-tooltip class="item" effect="dark" v-if="item.templateStatus == 0" content="编辑" placement="top">
                  <a style="font-size: 14px; position: absolute; right: 0" @click="handleEdit(item)">
                    <span class="el-icon-edit" style="font-size: 18px;color: #1677FF"></span>
                  </a>
                </el-tooltip>
                <span style="position: absolute; top: 39px; left: 80px; margin-left: 10px;font-size: 14px">
                <span style="color: #646a73">消息类型：</span>
                <span style="color: #1677ff;">
                  {{ messageTypeList.find(demo => demo.id == item.pushWays.messageType).name }}
                </span>
              </span>
                <span style="position: absolute; top: 69px; left: 80px; margin-left: 10px;font-size: 14px">
                  <span style="color: #646a73">通道类型：</span>
                  <span style="color: #1677ff;">
                    <dict-tag :type="DICT_TYPE.MESSAGE_CHANNEL" :value="item.pushWays.channelType" />
                  </span>
                </span>
              </div>
              <div style="margin-top: 10px;">
                <div style="float: left">
                  <el-button type="primary" size="small" @click="updateStatus(item)" v-if="item.templateStatus == 1">禁 用</el-button>
                  <el-button type="primary" @click="updateStatus(item)" size="small" v-if="item.templateStatus == 0">启 用</el-button>
                  <el-button @click="handleClone(item)" size="small">克 隆</el-button>
                  <el-button size="small" @click="handleDeleted(item)" v-if="item.templateStatus == 0">删 除</el-button>
                </div>
                <div style="float: right">
                  <el-button type="text" @click="handleView(item)" size="small">更多信息</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <el-pagination
        background
        :current-page="page.currentPage"
        :page-sizes="[8, 16, 32, 64, 128]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.pageSize"
        :pager-count="5"
        @size-change="changeSize"
        @current-change="changeCurrent"
        style="float: right; margin: 20px 0;">
      </el-pagination>
    </div>

    <TemplateAddDialog
      ref="templateAdd"
      v-if="templateAddShow"
      @restOnLoad="restOnLoad">
    </TemplateAddDialog>
  </div>
</template>

<script>
import {deleteByIds, getPage, updateStatusById} from '@/api/message/template'
import TemplateAddDialog from "@/views/message/testTemplate/component/templateAddDialog.vue";

export default {
  name: "templateIndex",
  components: {
    TemplateAddDialog
  },
  data() {
    return {
      tableLoading: false,
      templateAddShow: false,
      formInline: {}, // 搜索过滤数据
      tableData: [], // 列表数据
      page: {
        pageSize: 8 ,
        currentPage: 1,
        total: 0
      },
      messageTypeList: [
        { id: '1', name: '文本消息' },
      ]
    }
  },
  mounted() {
    this.onLoad()
  },
  methods: {
    // 点击新增
    handleAdd() {
      this.templateAddShow = true
      this.$nextTick(() => {
        this.$refs.templateAdd.addTemplate()
      })
    },
    // 点击编辑
    handleEdit(row) {
      const data = {...row}
      this.templateAddShow = true
      this.$nextTick(() => {
        this.$refs.templateAdd.editTemplate(data)
      })
    },
    handleView(row) {
      const data = {...row}
      this.templateAddShow = true
      this.$nextTick(() => {
        this.$refs.templateAdd.viewTemplate(data)
      })
    },
    // 点击克隆
    handleClone(row) {
      const data = row
      this.templateAddShow = true
      this.$nextTick(() => {
        this.$refs.templateAdd.cloneTemplate(data)
      })
    },
    // 点击启用禁用
    updateStatus(row) {
      let data = {}
      data.templateId = row.templateId
      if (row.templateStatus == 0) {
        data.templateStatus = 1
      } else if (row.templateStatus == 1) {
        data.templateStatus = 0
      } else {
        this.$message.error("参数异常")
        return
      }
      updateStatusById(data).then(res => {
        if (res.code == 0) {
          this.$message.success("操作成功")
          this.onLoad()
        } else {
          this.$message.error("操作失败")
        }
      })

    },
    // 点击行删除
    handleDeleted(row) {
      this.$confirm("确定将选择数据删除", {
        confirmButtonText: "确定",
        cancelButtonText: "删除",
        type: "warning"
      }).then(() => {
        let ids = []
        ids.push(row.templateId)
        deleteByIds({ids: ids}).then(res => {
          if (res.code === 0) {
            this.$message.success("删除成功")
            this.onLoad()
          } else {
            this.$message.error("删除失败")
          }
        })
      })
    },
    restOnLoad() {
      this.templateAddShow = false
      this.onLoad()
    },
    changeCurrent (val) {
      this.page.currentPage = val
      this.onLoad()
    },
    changeSize (val) {
      this.page.pageSize = val
      this.onLoad()
    },
    handleSearch() {
      this.onLoad(this.formInline)
    },
    handleEmpty() {
      this.formInline = {}
      this.onLoad()
    },
    onLoad(params = {}) {
      params.currentPage = this.page.currentPage
      params.pageSize = this.page.pageSize
      this.tableLoading = true
      getPage(params).then(res => {
        const data = res.data
        this.tableData = data.records
        this.tableData.forEach(item => {
          item.pushWays = JSON.parse(item.pushWays)
        })
        this.page.total = data.total
        this.tableLoading = false
      })
    }
  }
};
</script>
<style scoped>
.top-button ::v-deep .el-button + .el-button {
  margin-left: 0;
}
</style>
